/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="editDistance">
    <el-form :model="Form" ref="addForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="设置距离" prop="oldPass">
        <div class="distanceContener">
          <div class="title">
            <div>路口名称/间隔距离(米)</div>
            <div>路口宽度（米）</div>
          </div>
          <div style="width:100%;height:460px;">
            <div style="margin-top: 20px;margin-left:80px;border: 0px solid red;">
              <el-scrollbar style="height: 440px;">
                <el-timeline style="margin-top:20px;">
                  <el-timeline-item
                    v-for="(step, index) in routeData.devs"
                    ref="timeline"
                    :key="index"
                    timestamp=""
                    placement="top"
                    icon="icon success"
                    type="primary"
                    size="large"
                    @click.native="onStepClick(index)"
                  >
                    <div style="border:0px solid red;margin-top:-20px;margin-left:0px;display:flex;justify-content: space-around;">
                      <div style="display:inline-block;margin-right:50px;">
                        {{step.name }}
                      </div>
                      <div style="margin-right:50px;">
                        <el-input-number :controls="false" :min="0" v-model="step.width"></el-input-number>
                      </div>
                    </div>
                    <div v-show ="index < route.devs.length - 1" style="width:100px;height:30px;border:0px solid red;margin-left: -68px;">
                      <el-input-number :controls="false" style="width:84%;" :min="0" v-model="step.nextDistance"></el-input-number>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="display:flex;justify-content:end;">
      <el-button type="primary" @click="onPreviousClick()">上一步</el-button>
      <el-button type="primary" @click="onNextClick()">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'editRouteDistance',
  components: { },
  props: {
    route: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      // route: {
      //   devs: [
      //     {
      //       agentid: 1,
      //       name: '路口1',
      //       distance: 0,
      //       nextDistance: 1000,
      //       width: 100
      //     },
      //     {
      //       agentid: 2,
      //       name: '路口2',
      //       distance: 1000,
      //       nextDistance: 2000,
      //       width: 100
      //     },
      //     {
      //       agentid: 3,
      //       name: '路口3',
      //       distance: 1000,
      //       nextDistance: 0,
      //       width: 100
      //     }
      //   ]
      // },
      routeData: {},
      isedit: true,
      step: 3,
      tableHeight: 450,
      list: [],
      addDialogVisible: false,
      Form: {
        name: ''
      }
    }
  },
  mounted () {
    console.log(this.route)
    if (this.route.devs) {
      this.list = this.route.devs
    }
    this.routeData = JSON.parse(JSON.stringify(this.route))
  },
  methods: {
    onStepClick (index) {
      console.log('onStepClick', index)
    },
    show (param) {
      if (param) {
        this.isedit = true
        this.Form.name = param.name
        this.list = param.list
      }
      this.addDialogVisible = true
    },
    close () {
      this.resetForm()
      this.addDialogVisible = false
    },
    onAddClick () {
      let choseIntersection = this.$refs.choseIntersection
      choseIntersection.show()
    },
    relateDistance () {
      for (let i = 0; i < this.routeData.devs.length; i++) {
        let dev = this.routeData.devs[i]
        if (i > 0) {
          dev.distance = this.routeData.devs[i - 1].nextDistance
        } else {
          dev.distance = dev.distance ? dev.distance : 0
        }
      }
    },
    onPreviousClick () {
      this.relateDistance()
      let res = {
        list: this.routeData.devs
      }
      this.$emit('onPreviousClick', res, this.step)
    },
    onNextClick () {
      this.relateDistance()
      let res = {
        list: this.routeData.devs
      }
      this.$emit('onNextClick', res, this.step)
    },
    commit () {
      this.$emit('updateRoute', {name: this.Form.name})
    },
    resetForm () {
      this.Form.name = ''
      this.list = []
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss">
</style>
